
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
    // JavaScript prototype（原型对象）
    function Pagination (total, pageSize, pageCurrent) {
        this.total = total;
        this.pageSize = pageSize;
        this.pageCurrent = pageCurrent;
        this.page = Math.ceil(this.total/Number(this.pageSize));
    }

    // 根据total，pageSize，pageCurrent动态设置分页数，及当前选中项
    Pagination.prototype.renderDom = function () {
        // 分页的HTML
        let ulHtml = document.querySelector('.pagination');
        // 创建 << 节点
        let li1 = document.createElement('li');
        let a1 = document.createElement('a');
        let text1 = document.createTextNode('<<');
        a1.appendChild(text1);
        li1.appendChild(a1);
        ulHtml.appendChild(li1);
        a1.setAttribute('class', 'prevDom');
        // a1.setAttribute('onclick', 'handlePrevClick()')
        // 创建 分页页数 节点
        for (let i = 0; i < this.page; i++) {
            let li = document.createElement('li');
            let a = document.createElement('a');
            let text = document.createTextNode(i+1);
            a.appendChild(text);
            li.appendChild(a);
            ulHtml.appendChild(li);
            if (i === Number(this.pageCurrent)) {
                a.setAttribute('class', 'active');
            };
            a.setAttribute('onclick', 'handleClick(this)');
        };
        // 创建 >> 节点
        let li2 = document.createElement('li');
        let a2 = document.createElement('a');
        let text2 = document.createTextNode('>>');
        a2.appendChild(text2);
        li2.appendChild(a2);
        ulHtml.appendChild(li2);
        a2.setAttribute('class', 'lastDom');
        // a.setAttribute('onclick', 'handleLastClick()');
    }

    // 上一页
    Pagination.prototype.prevPage = function () {
        // 点击上一页，页数减1，若当前页数为1则return
        let p = Number(this.pageCurrent);
        if (p === 1 || (p - 1) < 1) {
            return;
        };
        if ((p - 1) >= 1) {
            let _p = p - 1;
            let aNodeList = document.querySelectorAll('.pagination li a');
            for (let i = 0; i < aNodeList.length; i++) {
                // 若为上一页/下一页元素，不涉及添加active类
                if (i === 0 || i === aNodeList.length) {
                    continue;
                };
                if (aNodeList[i].text == _p) {
                    aNodeList[i].setAttribute('class', 'active');
                    this.pageCurrent = _p;
                } else {
                    aNodeList[i].setAttribute('class', '');
                };
            };
        };
    }

    // 下一页
    Pagination.prototype.lastPage = function () {
        debugger
        // 点击上一页，页数减1，若当前页数为1则return
        let p = Number(this.pageCurrent);
        if (p === this.page || (p + 1) > this.page) {
            return;
        };
        if ((p + 1) <= this.page) {
            let _p = p + 1;
            let aNodeList = document.querySelectorAll('.pagination li a');
            for (let i = 0; i < aNodeList.length; i++) {
                // 若为上一页/下一页元素，不涉及添加active类
                if (i === 0 || i === aNodeList.length) {
                    continue;
                };
                if (aNodeList[i].text == _p) {
                    aNodeList[i].setAttribute('class', 'active');
                    this.pageCurrent = _p;
                } else {
                    aNodeList[i].setAttribute('class', '');
                };
            };
        };
    }

    // 点击分页按钮
    Pagination.prototype.clickPage = function (elem) {
        let _p = Number(this.pageCurrent);
        if (elem.text == '<<' || elem.text == '>>' || this.text == this.pageCurrent) {
            return;
        };
        let aNodeList = document.querySelectorAll('.pagination li a');
        for (let i = 0; i < aNodeList.length; i++) {
            // 若为上一页/下一页元素，不涉及添加active类
            if (i === 0 || i === aNodeList.length) {
                continue;
            };
            aNodeList[i].setAttribute('class', '');
            elem.setAttribute('class', 'active');
            this.pageCurrent = elem.text;
        };
    }

    // 创建分页对象
    let pageCons = new Pagination(105, 10, 2);
    // 根据参数渲染分页列表
    pageCons.renderDom();
    // 上一页事件
    document.querySelector('.pagination a.prevDom').onclick = function () {
        pageCons.prevPage();
    };
    // 下一页事件
    document.querySelector('.pagination a.lastDom').onclick = function () {
        pageCons.lastPage();
    };
    // 每页事件
    function handleClick (elem) {
        pageCons.clickPage(elem);
    }
</script>

  </script>
</body>
</html>